<template>
    <div class="home">
        <section class="home-carousel">
            <template>
                <el-carousel class="homepage-carousel" :interval="5000" height="400px">
                    <el-carousel-item v-for="(item, index) in carouselPicData" :key="index">
                        <a :href="item.link_url == '' ? false : item.link_url" :target="item.link_url == '' ? '_Self' : '_Blank'"><img v-if="item.picture" :src="BASE_URL + item.picture" /></a>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </section>

        <section class="i_application apps-section maxW">
            <div class="i_applicationTitle home-app-list clear">
                <span>应用管理</span>
                <router-link to="/home/app">
                    更多
                    <i class="ipng Shape_13"></i>
                </router-link>
            </div>
            <div class="i_applicationBox clear">
                <template v-for="(item, index) of applicationData">
                    <a :key="index" class="i_appList wow rollIn" @click="checkRole(item.url, item.jump_model, item.isdefault, item.id, item.true_url, item.is_new_from)">
                        <div><img v-if="item" :src="BASE_URL + item.logo_path" /></div>
                        <p :class="{ empty: !item }">
                            <span v-if="item">{{ item.name }}</span>
                        </p>
                    </a>
                </template>
            </div>
        </section>
        <section class="i_application res-section maxW">
            <div class="i_applicationTitle clear">
                <span>推荐资源</span>
                <router-link class="i_more fr" to="/home/resourceList">
                    更多
                    <i class="ipng Shape_13"></i>
                </router-link>
            </div>
            <div class="i_hResourcesBox">
                <resourceRow :opctions="recommendData"></resourceRow>
            </div>
        </section>
       <section class="i_application maxW">
            <div class="i_applicationTitle clear">
                <span>热门推荐</span>
                <router-link to="/home/openclassList">
                    更多
                    <i class="ipng Shape_13"></i>
                </router-link>
            </div>
            <div class="i_hotBox">
                <ul class="clear" id="hot_video">
                    <template v-for="(item, index) of hotVideoData">
                        <li class="i_hotList wow bounceInLeft fl" v-if="item" :key="index">
                            <a @click="goToDetailPage(item.status_m3u8, item.resid)">
                                <img v-if="item.picture" :src="BASE_URL + item.picture" :onerror="errorImg" />
                            </a>
                            <a @click="goToDetailPage(item.status_m3u8, item.resid)" class="i_ellipsis" :title="item.video_name">
                                {{ item.video_name }}
                            </a>
                            <div class="i_hotType clear">
					            <a @click="goToAppModel('space/resource',item.uid,item.push_code,item.app_code)">
                                    <span><img v-if="item.avatar_path" :src="BASE_URL + item.avatar_path" /></span>
                                    {{ item.user_name }}
                                </a>
                                <a href="javascript:;">{{ item.category}}</a>
                            </div>
                            <i v-if="item.is_nice == 1" class="is-nice"></i>
                        </li>
                        <!-- 占位符 -->
                        <li class="i_hotList wow bounceInLeft fl" v-else :key="index"></li>
                    </template>
                </ul>
            </div>
        </section>

        <section class="i_application maxW clear">
            <div class="i_hTeacher wow fl slideInLeft">
                <div class="i_applicationTitle clear">
                    <span>名师中心</span>
                    <router-link to="/teach">
                        更多
                        <i class="ipng Shape_13"></i>
                    </router-link>
                </div>
                <div class="famous-teachers">
                    <template v-for="(item, index) of teacherCenterData">
                        <div class="teacher" :key="index" v-if="item" @click="goToAppModel('teach/space',item.id,item.push_code,item.app_code)" >
                            <img v-if="item.avatar_path" :src="BASE_URL + item.avatar_path" />
                            <p class="teacher-name">{{ item.name }}</p>
                            <div class="org-info">
                                <template v-if="isSchool">
                                    <span>{{ item.sub_name }}</span>
                                </template>
                                <template v-else>
                                    <span v-if="item.category">{{ item.category.split('-')[0] }}</span>
                                    <span>{{ item.sub_name }}</span>
                                </template>
                            </div>
                        </div>
                        <!-- 占位符 -->
                        <div :key="index" v-else class="teacher-pleaceholder"></div>
                    </template>
                </div>
            </div>
            <div class="i_hNews fr">
                <div class="i_applicationTitle clear">
                    <span>新闻公告</span>
                    <router-link to="/home/newsList">
                        更多
                        <i class="ipng Shape_13"></i>
                    </router-link>
                </div>
                <div class="i_hNewsBox">
                    <div class="i_testBox i_scorbar clear" id="news_list">
                        <div class="i_testTab" v-for="(item, index) of newsData" :key="index">
                            <input type="radio" class="i_testRadio" :checked="index == checknews" />
                            <label class="i_testLabel" @click="getNewsList(item.id, index)">{{ item.name }}</label>
                            <div class="i_tabContent">
                                <ul>
                                    <template v-for="(item1, index1) of newsListData">
                                        <li v-if="item1" class="i_hNotice clear" :key="index1">
                                            <router-link :to="{ path: '/home/newsDetail', query: { id: item1.id } }">{{ item1.name }}</router-link>
                                            <strong v-html="formatTime1(item1.update_time)"></strong>
                                        </li>
                                        <!-- 占位符 -->
                                        <li v-else class="i_hNotice clear" :key="index1"></li>
                                    </template>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="i_application maxW">
            <div class="i_applicationTitle">
                <span>{{ CampusStyleData.name }}</span>
            </div>
            <div class="i_elegantDemeanor clear">
                <div class="i_companyImg fl"><img v-if="CampusStyleData.picture" :src="BASE_URL + CampusStyleData.picture" /></div>
                <div class="i_companyProfile fr">
                    <div :class="CampusStyleData.content ? 'container' : 'container bgc'" v-html="CampusStyleData.content"></div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import resourceRow from '../base/resource-row'
export default {
	components: {
		resourceRow
	},    
    props: {
        pathOption: {
            personal: '', //个人中心跳转路径
            manage: '' //后台跳转路径
        }
    },
    data() {
        return {
            userId: this.$g.user_id,
            carouselPicData: [],
            applicationData: [],
            hotVideoData: [],
            errorImg: 'this.src="' + require('../../../assets/images/image_loding.png') + '"',
            teacherCenterData: [],
            newsData: [],
            newsListData: [],
            newsActiveName: '0',
            checknews: 0,
            CampusStyleData: [],
            hostURL:"",
            resourceData: [],
            openclassData: [],
			recommendData: [],

        };
    },
    created() {
		this.hostURL = sessionStorage.getItem('host_addr');
        this.getCarouselPic();
        this.appList();
        this.hotVideo();
        this.recommendResource();
        this.teacherCenter();
        this.news();
        this.CampusStyle();
    },
    computed: {
        CheckSchoolAppCode(){
            let code = sessionStorage.getItem('CheckSchoolAppCode');
            return code ? code : '00000000000000000000000000000000';
        },
        isSchool(){
            return this.$store.getters.isSchool;
        },
    },
    methods: {
        //轮播图
        getCarouselPic() {
            let success = res => {
                this.carouselPicData = res.data;
            };
            this.$ajax({
                url: 'api/carousel/banners',
                method: 'get',
                params: {},
                func: {
                    success: success
                }
            });
        },
        // 应用管理
        appList() {
            let success = res => {
                if(res.data.length > 7) {
                    this.applicationData = new Array(7);
                }else{
                    this.applicationData = new Array(res.data.length);
                }
                res.data.forEach((item, idx) => {
                    this.applicationData[idx] = res.data[idx];
                });
            };
            this.$ajax({
                url: 'api/app/app_list',
                method: 'get',
                params: {
                    page_index: 1,
                    page_size: 7,
                    order_type: 'click',
                    status: 1,
                    select_type: 1,
                },
                func: {
                    success: success
                }
            });
        },
        /**  应用图标的点击事件
         * @param url 前台应用跳转地址
         * @param jumpModel '跳转方式 1：直接跳转（本平台以内的）  2验证跳转（参考跳转到前台） 3（验证跳转到个人中心） 4 直接跳转（本平台以外的）'
         * @param isDefault 是否是默认应用 1：是；0：不是（注默认应用不验证权限，登录 除对话，发评论等需登录的功能外）
         * @param id 应用id
         * @param trueUrl 其他系统模块应用跳转地址
         * @param isNewFrom 0：当前窗口打开；1：新窗口打开
         */
        checkRole(url, jumpModel, isDefault, id, trueUrl, isNewFrom) {
            if (url == '') {
                this.$message.error('该功能暂未开放！');
                return;
            }
            if (isDefault != 1) {
                if (this.userId == 0) {
                    this.$message.error('该功能需要登录后才能使用！');
                    return;
                }
                if (!is_empty(this.$store.getters.userInfo) && this.$store.getters.userInfo.role.indexOf(7) > -1) {
                    this.$message.error('游客无权进入！');
                    return;
                }
                this.checkNode(url, jumpModel, isDefault, id, trueUrl, isNewFrom);
            } else {
                this.addAppVisitRecord(id);
                if (jumpModel == 1 || jumpModel == 2) {
                    switch (url) {
                        case '/index/resource/index':
                            url = 'home/resourceList';
                            break;
                        case 'live':
                            url = 'home/liveList';
                            break;
                        case 'album':
                            url = 'home/albumList';
                            break;
                        case 'openclass':
                            url = 'home/openclassList';
                            break;
                        case 'teachcenter':
                            url = 'teach';
                            break;
                        case 'email':
                            url = 'email/inbox';
                            break;
                        case 'ask':
                            url = 'teach/ask';
                            break;
                    }
                    if (isNewFrom == 0) {
                        this.$router.push({
                            path: '/' + url,
                            query: { CheckSchoolAppCode: this.CheckSchoolAppCode }
                        });
                    } else {
                        const { href } = this.$router.resolve({
                            path: '/' + url,
                            query: {
                                CheckSchoolAppCode: this.CheckSchoolAppCode
                            }
                        });
                        window.open(href, '_blank');
                    }
                }
                // 跳个人中心
                else if (jumpModel == 3) {
                    let urlString = this.pathOption.personal + '&routerUrl=' + url;
                    isNewFrom == 0 ? (window.location.href = urlString) : window.open(urlString, '_blank');
                }
                //跳其他系统模块
                else if (jumpModel == 4) {
                    if (trueUrl == '' || trueUrl == null || trueUrl == false) {
                        this.$message.error('该功能暂未开放！');
                        return;
                    }
                    isNewFrom == 0 ? (window.location.href = url) : window.open(url, '_blank');
                }
            }
        },
        // 检验跳转权限
        checkNode(url, jumpModel, isDefault, id, trueUrl, isNewFrom) {
            let success = res => {
                this.addAppVisitRecord(id);
                // 跳前台
                if (jumpModel == 1 || jumpModel == 2) {
                    switch (url) {
                        case '/index/resource/index':
                            url = 'home/resourceList';
                            break;
                        case 'live':
                            url = 'home/liveList';
                            break;
                        case 'album':
                            url = 'home/albumList';
                            break;
                        case 'openclass':
                            url = 'home/openclassList';
                            break;
                        case 'teachcenter':
                            url = 'teach';
                            break;
                        case 'email':
                            url = 'email/inbox';
                            break;
                        case 'ask':
                            url = 'teach/ask';
                            break;
                    }
                    if (isNewFrom == 0) {
                        this.$router.push({
                            path: '/' + url,
                            query: { CheckSchoolAppCode: this.CheckSchoolAppCode }
                        });
                    } else {
                        const { href } = this.$router.resolve({
                            path: '/' + url,
                            query: {
                                CheckSchoolAppCode: this.CheckSchoolAppCode
                            }
                        });
                        window.open(href, '_blank');
                    }
                }
                // 跳个人中心
                else if (jumpModel == 3) {
                    let urlString = this.pathOption.personal + '&routerUrl=' + url;
                    isNewFrom == 0 ? (window.location.href = urlString) : window.open(urlString, '_blank');
                }
                //跳其他系统模块
                else if (jumpModel == 4) {
                    if (trueUrl == '' || trueUrl == null || trueUrl == false) {
                        this.$message.error('该功能暂未开放！');
                        return;
                    }
                    isNewFrom == 0 ? (window.location.href = url) : window.open(url, '_blank');
                }
            };
            this.$ajax.get('/api/login/checkthisnode', {
                params: {
                    url: url,
                    token: localStorage.getItem('logintoken'),
                    checkschoolappcode: this.CheckSchoolAppCode
                },
                func: { success: success }
            });
        },
        /** 添加应用访问记录
         * @param id 应用id
         */
        addAppVisitRecord(id) {
            let success = res => {};
            this.$ajax({
                url: '/api/app/add_app_visit_record',
                method: 'post',
                data: {
                    app_id: id
                },
                func: {
                    success: success
                }
            });
        },
		// 推荐资源
		recommendResource() {
            this.recommendData = [];
			let success = res => {
                const data = res.data;
				const pleaceholder = new Array(8 - data.length);
				this.recommendData = [...data,...pleaceholder];
			};
			this.$ajax({
				url: 'api/resource/resource',
				method: 'get',
				params: {
					orderby: 'create_time',
					page: 1,
					size: 8,
					authonity: 1,
					not_in_file_type: 2,
					status: 1
				},
				func: {
					success: success
				}
			});
		},        
        // 热门推荐
        hotVideo() {
            this.hotVideoData = [];
            let success = res => {
                // 数据不够8个的话，给空的，为了在模板遍历的时候够8次，显示占位符效果
                this.hotVideoData = new Array(8);
                for (let inx in res.data) {
                    this.hotVideoData[inx - 1] = res.data[inx];
                }
            };
            this.$ajax({
                url: 'api/video/get_home_position_video',
                method: 'get',
                params: {
                    page_index: 1,
                    page_size: 8,
                    order_type: 'click'
                },
                func: {
                    success: success
                }
            });
        },

        // 名师中心：
        teacherCenter() {
            let success = res => {
                this.teacherCenterData = new Array(10);
                res.data.forEach((item, inx) => {
                    this.teacherCenterData[inx] = res.data[inx];
                });
            };
            this.$ajax({
                url: 'api/user/index_master',
                method: 'get',
                params: {
                    page: 1,
                    size: 10,
                    is_famous: 1,
                    status: 1
                },
                func: {
                    success: success
                }
            });
        },

        // 获取新闻公告标题：
        news() {
            let success = res => {
                this.newsData = res.data;
                if(!is_empty(res.data)){
                  this.getNewsList(res.data[0].id, 0);
                }
            };
            this.$ajax({
                url: 'api/news/news_category',
                method: 'get',
                params: {
                    page_index: 1,
                    page_size: 3
                },
                func: {
                    success: success
                }
            });
        },
        // 获取新闻公告标题id对应的列表：
        getNewsList(_id, _index) {
            this.checknews = _index;
            let success = res => {
                this.newsListData = new Array(6);
                res.data.data.forEach((item, inx) => {
                    this.newsListData[inx] = res.data.data[inx];
                });
            };
            this.$ajax({
                url: 'api/news/news_list',
                method: 'get',
                params: {
                    page_index: 1,
                    page_size: 6,
                    category_id: _id,
                    order: 'sort'
                },
                func: {
                    success: success
                }
            });
        },
        // 校园风采：
        CampusStyle() {
            let success = res => {
                this.CampusStyleData = res.data;
            };
            this.$ajax({
                url: 'api/setting/school_culture',
                method: 'get',
                params: {},
                func: {
                    success: success
                }
            });
        }
    }
};
</script>
<style lang="scss">
    .famous-teachers{
        box-sizing: border-box;
        height: 350px;
        padding: 10px 20px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 20px;
        justify-items: center;
        align-items: center;
        background-color: #ffffff;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
        border-radius: 3px;     
        margin: 10px 0 30px;   
        .teacher{
            display: inline-block;
            width: 85px;
            height: 110px;            
            text-align: center;
            position: relative;
            cursor: pointer;
            &:hover{
                .org-info{
                    visibility: visible;
                    opacity: 1;
                    transform: scale(1);
                }
                .teacher-name{
                    color: #348efc;
                }
            }
            img{
                display: inline-block;
                width: 80px;
                border-radius: 3px;     
                overflow: hidden;
            }
            .teacher-name{
                width: 100%;
                height: 20px;
                line-height: 20px;
                text-align: center;
                margin-top: 10px;
                font-size: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .org-info{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 80px;
                text-align: center;
                color: #fff;
                background-image: linear-gradient(90deg, #6c80a8, #3a496f);
                border-radius: 4px;
                visibility: hidden;
                opacity: 0;
	            transition: all .35s ease-in;
                transform: scale(1.2);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                flex-wrap:wrap;
                span{
                    max-width: 80px;
                    padding: 5px 0;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
        .teacher-pleaceholder{
            display: inline-block;
            width: 85px;
            height: 110px; 
            background-color: #effaff;
        }
    }

</style>